<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>获取前置摄像头并兼容iOS</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <video ref="video"></video>
      <canvas style="display: none" id="canvasCamera"></canvas>
      <div v-if="imgSrc" class="img_bg_camera">
        <img :src="imgSrc" class="tx_img" />
      </div>
      <button @click="OpenCamera">打开摄像头</button>
      <button @click="CloseCamera">关闭摄像头</button>
      <button @click="setImage">拍照</button>
    </div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            mediaStreamTrack: {},
            // eslint-disable-next-line camelcase
            video_stream: "", // 视频stream
            imgSrc: "", // 拍照图片
            canvas: null,
            context: null,
          };
        },
        mounted() {
          // 进入页面 自动调用摄像头
          this.getCamera();
        },
        methods: {
          // 调用打开摄像头功能
          getCamera() {
            // 获取 canvas 画布
            this.canvas = document.getElementById("canvasCamera");
            this.context = this.canvas.getContext("2d");
            // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
            if (navigator.mediaDevices === undefined) {
              navigator.mediaDevices = {};
            }
            // 正常支持版本
            navigator.mediaDevices
              .getUserMedia({
                video: true,
              })
              .then((stream) => {
                // 摄像头开启成功
                this.mediaStreamTrack =
                  typeof stream.stop === "function"
                    ? stream
                    : stream.getTracks()[0];
                // eslint-disable-next-line camelcase
                this.video_stream = stream;
                this.$refs.video.srcObject = stream;
                this.$refs.video.play();
              })
              .catch((err) => {
                console.log(err);
              });
          },
          // 拍照 绘制图片
          setImage() {
            console.log("拍照");
            // 点击canvas画图
            this.context.drawImage(this.$refs.video, 0, 0, 200, 100);
            // 获取图片base64链接
            const image = this.cancas.toDataURL("image/png");
            this.imgSrc = image;
            this.$emit("refreshDataList", this.imgSrc);
          },
          // 打开摄像头
          OpenCamera() {
            console.log("打开摄像头");
            this.getCamera();
          },
          // 关闭摄像头
          CloseCamera() {
            console.log("关闭摄像头");
            this.$refs.video.srcObject.getTracks()[0].stop();
          },
        },
      });
    </script>
  </body>
</html>
